import React, { Component } from 'react';
import './search.css'
import { View, Image, Text, Input } from '@tarojs/components'
import { AtIcon, AtInput, AtNavBar } from 'taro-ui'
import Taro from '@tarojs/taro'
import axios from 'axios'
import qs from 'qs'
class search extends Component {
  constructor(props) {
    super(props)
    this.state = {
      searchValue: '',
      sousuoArr: ['可乐', '衣服', '牛奶'],
      showsousuo: [],
      imgurl: 'http://172.17.6.224:8085',
      xianArr: []
    }
  }

  componentWillMount() {
    let arr = this.state.sousuoArr.map(item => {
      return <Text className='seabefore' onClick={this.search.bind(this, item)}>{item}</Text>
    });
    this.setState({
      showsousuo: arr
    });
  }
  handleChange(value) {
    this.setState({
      searchValue: value
    })
  }
  //返回
  back() {
    Taro.navigateBack({
      delta: 1
    })
  }

  toxiangqing(data) {
    Taro.navigateTo({
      url: '/pages/search/search?shopId=' + JSON.stringify(data)
    })
  }
  //搜索
  search(item) {
    let value = this.state.searchValue;
    if (value !== '' && typeof item === 'object') {
      if (this.state.sousuoArr.length >= 3) {
        this.state.sousuoArr.splice(3, 1)
      }
      this.state.sousuoArr.unshift(value)
    }

    let userId = '';
    if (sessionStorage.getItem('userId')) {
      userId = sessionStorage.getItem('userId')
    } else {
      userId = 32
    }
    if (typeof item === 'string') {
      value = item;
    }
    axios.post('/api/front/select', qs.stringify({
      userId: userId,
      hisName: value
    })).then(res => {
      let arr = res.data.data
      if (arr) {
        let sp = arr.map(item => {
          return <View className='showlistzi'>
            <Image
              className='listtu'
              src={this.state.imgurl + item.picOne}
              onClick={this.toxiangqing.bind(this, item.goodsId)}></Image>
            <View className='listtitle'>{item.goodsName}</View>
            <View>
              <Text className='price'>￥{item.goodsRealPrice}</Text>
              <Text className='xiaoliang'>销量:{item.goodsSellNumber}</Text>
            </View>
          </View>
        })
        this.setState({
          xianArr: sp
        });
      } else {
        let sp = <View className='nono'>
          <AtIcon value='close-circle' size='30'></AtIcon>
        没有查询到数据 </View>;
        this.setState({
          xianArr: sp
        });
      }
    })


    let arr = this.state.sousuoArr.map(item => {
      return <Text className='seabefore' onClick={this.search.bind(this, item)}>{item}</Text>
    });
    this.setState({
      showsousuo: arr
    });
  }
  render() {
    return (
      <div>
        <AtNavBar
          onClickLeftIcon={this.back.bind(this)}
          color='#000'
          leftText='返回'
          rightFirstIconType='bullet-list'
        >
          <View>搜索</View>
        </AtNavBar>
        {/* 搜索框 */}
        <View>
          <Text className='sea'>
            <AtIcon value='search' size='30' color='#696A6B'></AtIcon>
          </Text>
          <View className='homeTitle2'>
            <AtInput
              name='value1'
              type='text'
              placeholder='点这里搜索'
              value={this.state.searchValue}
              onChange={this.handleChange.bind(this)}
            />
            <Text className='sou' onClick={this.search.bind(this)}>搜索</Text>
          </View>
        </View>
        <View>
          <Text className='seaTtile'>搜索热门</Text>
          <Text className='seaTtile' >搜索历史</Text>
          <View className='seafu'>
            {this.state.showsousuo}
          </View>
        </View>
        <View className='showlist'>

          {this.state.xianArr}

        </View>
      </div>
    );
  }
}

export default search;